html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
body {
  overflow-x: hidden;
  background-color: #d5d2e2;
}

.header {
  color: #323f5c;
  position: fixed;
  top: 30px;
  left: 50px;
  font-size: 28px;
}

.ink {
  position: fixed;
  bottom: -50px;
  right: -80px;
  width: 450px;
  font-size: 0;
  opacity: 0.7;
  img {
    width: 100%;
  }
}

.container {
  width: 70vw;
  position: fixed;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  transform: translate(-15vw, 275px) rotateX(45deg) rotateZ(45deg);
  height: calc(100vh - 280px);
  transform-origin: 50% 100%;
  .list {
    position: relative;
    width: 900px;
    transform: translate3d(0, 0, 0);
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    .item {
      width: 300px;
      box-sizing: border-box;
      padding: 15px;
      transform-style: preserve-3d;
      font-size: 0;
      .img-wraper {
        position: relative;
        width: 100%;

        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          background-color: #fff;
          transform: scale(0.8);
          transition: all 0.3s;
          opacity: 0.6;
          background: rgba($color: #000000, $alpha: 0.8);
          box-shadow: 0 0 0 0 rgba($color: #000000, $alpha: 0.8);
        }
        img {
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          transition: all 0.2s ease-out;
          box-shadow: 0 0 5px 5px rgba($color: #000000, $alpha: 0.1);
          &:nth-child(1) {
            z-index: 4;
            position: relative;
          }
          &:nth-child(2) {
            z-index: 3;
          }
          &:nth-child(3) {
            z-index: 2;
          }
        }
      }
      &:hover {
        .img-wraper {
          &::after {
            opacity: 0.2;
            transform: scale(1);
            box-shadow: 0 0 20px 10px rgba($color: #000000, $alpha: 0.8);
          }
          img:nth-child(1) {
            transform: translate3d(-120px, -120px, 0);
          }
          img:nth-child(2) {
            transform: translate3d(-80px, -80px, 0);
          }
          img:nth-child(3) {
            transform: translate3d(-40px, -40px, 0);
          }
        }
      }
    }
  }
}
